<template>
	<div>
		<van-nav-bar title="查看本店车辆" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div>
			<div class="car-list" v-for="(car,index) in cars" v-bind:key="index" style="display: flex; flex-direction: column;">
				<div style="display: flex; flex-direction: row;" @click="onCarDetail(car.carId)">
					<div>
						<van-image width="160px" height="100px" fit="contain" v-bind:src="car.titleImg" />
					</div>
					<div style="display: flex; flex-direction: column; justify-content: space-between">
						<p class="car-list-title">{{car.brand}} {{car.series}} {{car.years}} {{car.gearBox}} {{car.engine}} {{car.edition}}</p>
						<p class="car-list-info">{{car.licensingTime}}/{{car.tableMileage}}</p>
						<p class="car-list-price">{{car.totalPrice}} {{car.downPayment}}</p>
					</div>
				</div>
				<van-row type="flex" justify="space-around">
					<van-col>
						<van-button round type="info" style="width: 120px;" @click="onAlterCar(car.carId)">修改车辆信息</van-button>
					</van-col>
					<van-col>
						<van-button round type="danger" style="width: 120px;" @click="onDeleteCar(car.carId)">删除此车辆</van-button>
					</van-col>
				</van-row>
			</div>
			<van-pagination v-model="currentPage" :page-count="12" mode="simple" @change="onChange" />
		</div>
	</div>
</template>

<script>
	import {
		Dialog,
		Notify
	} from 'vant';

	export default {
		data() {
			return {
				user: {},
				currentPage: 1,
				cars: []
			}
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			onCarDetail(carId) {
				this.$router.push({
					path: "/car/cardetail",
					query: {
						carId: carId
					}
				})
			},
			onChange() {
				console.log("分页" + this.currentPage)
			},
			onAlterCar(carId) {
				this.$router.push({
					path: "/shop/altercar",
					query: {
						carId: carId
					}
				})
			},
			onDeleteCar(carId) {
				Dialog.confirm({
					message: '是否删除此此车辆？',
				}).then(() => {
					console.log("确认删除车辆，车辆id：" + carId)
					this.$axios({
						method: 'post',
						url: '/carshop/deleteCarById',
						headers: {
							'UserId': this.user.userId,
							'CarToken': this.user.token
						},
						data: this.$qs.stringify({
							carId: carId
						})
					}).then((resp) => {
						if (resp.data.msg == "删除汽车成功") {
							Notify({
								type: 'success',
								message: '删除成功'
							});
							window.location.reload();
						}
					})
				}).catch(() => {
					console.log("取消删除车辆")
				});
			}
		},
		mounted() {
			let user = this.$cookies.get('user');
			if (user != null) {
				this.user = user;
				this.$axios({
					method: 'post',
					url: '/carshop/findShopAllCarById',
					headers: {
						'UserId': this.user.userId,
						'CarToken': this.user.token
					},
					data: this.$qs.stringify({
						shopId: user.shopId
					})
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.cars = resp.data.obj;
					} else {
						Notify({
							type: 'danger',
							message: '未登录或登录已失效，请重新登录'
						})
						this.$router.back()
					}
				})
			} else {
				Notify({
					type: 'danger',
					message: '未登录或登录已失效，请重新登录'
				})
				this.$router.back()
			}


		}

	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 10px 0px;
	}
</style>
